
<div data-role="page" id="page-group-gift-amici" data-theme="f">
  
  <script>
    $( "#page-group-gift-amici" ).live( "pageinit", 'pageshow', function( event ) { // 9fb3cc
       
       $('#page-group-gift-amici a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');        
       $('#page-group-gift-amici a.nextbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; right: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 1px 0 0 rgba(255,255,255, 0.25), inset 1px 0 1px rgba(0,0,0, 0.2)"></div>');
    });
    
    
    // uso live perchè al caricamento della pagina esiste solo una input email
    // le altre vengono create al click su Add. Con live aggancio l'evento anche 
    // agli elementi creati dinamicamente.
    
    var tot = '..';
    var budget_singolo;
    
    $('#page-group-gift-amici').live('pageshow', function() { // avviene solo se gruppo
        
        // recupero il budget singolo dalla sessione
        var gift = JSON.parse(sessionStorage.getItem('gift'));

        if (gift != null) {
        	if (gift.budget != null) {  
        		budget_singolo = gift.budget;  // in questo caso è il budget a testa xk gruppo
        
        //alert(gift.budget);

        	tot = parseInt(budget_singolo) * (4 + 1);

        	}	
    		
        	$('#budget_group_tot').html(tot + ' €');
        	sessionStorage.budget = tot;
         }
    	});




    /*
     *  OK: per una gestione dinamica delle mail del gruppo.
     *  Attualmente però faccio una gestione statica per cui 
     *  visualizzo in readonly delle mail.
     */


    
    
     $("#add").live('click',function(e) {
      $("#email").append('<input type="email" data-mini="true" data-clear-btn="true" placeholder="Email address" name="email[]" value="">');
      $('input[name=email\\[\\]]').textinput();            
    });
    
       
    
    $('#email input[type=email]').live("change keyup input",function() {
        
        // conteggio quante email sono piene
        
        var t = Array();
        $.each($('input[name=email\\[\\]]'),function(){        
          if ($(this).val() != '')
            t.push($(this).val()); 
        });
        
        // calcolo il tot = budget singolo * numero amici del gruppo
        var tot = parseInt(budget_singolo) * (t.length + 1);
        
        $('#budget_group_tot').html(tot + '€');
		sessionStorage.budget = tot;
  
      });



    // al click su Invita amici 

    $("#invita-amici-gruppo").live("click",function() {
        
        // alert(JSON.stringify($('input[name=email\\[\\]]').serializeArray()));
                
        
        var t = Array();
        $.each($('input[name=email\\[\\]]'),function(){        
          t.push($(this).val()); 
          
          
        });
        
  			
         // memorizzo in sessione gli indirizzi mail del gruppo
         sessionStorage.setItem('friends_email', JSON.stringify(t));
         
         // 4 test: recupero gli indirizzi mail salvati in sessione
         var storedNames = JSON.parse(sessionStorage["friends_email"]);
         
         // stampo ogni singolo indirizzo mail recuperato  
          $.each(storedNames,function(key,val){
          //alert(val);
       	 });
    });
        
        
        
       /* 
        var formData = $("#email").serialize();
           // alert(formData);
      
            $.ajax({
                type: "POST",
                url: "script_invite.php",
                cache: false,
                data: formData,
                success: onSuccess,
                error: onError
            });

            return false;
      });
      */


     
    
    
  </script>

    <div data-role="header" data-theme="f">
        <a href="page.gift.start.php" class="backbutton" data-rel="back" data-ajax="false">Back </a>
        <h1>Crea il gruppo</h1>  <!-- posso mettere id=fer qui e toglierlo da sopra tanto le pag sono nello stesso file -->
        <a id="" href="page.gift_list.php" data-ajax="false" class="nextbutton">Next</a> 
    </div><!-- /header -->

    <div data-role="content">    
        
        <p>
          Invita i tuoi amici via mail:
        </p>
        <form id="email">          
          <label for="email">Email: </label>
          <input type="email" data-mini="true" data-clear-btn="false" readonly="readonly" placeholder="Email address" name="email[]" value="mario.rossi@gmail.com">          
          <input type="email" data-mini="true" data-clear-btn="false" readonly="readonly" placeholder="Email address" name="email[]" value="andrea.bianchi@yahoo.com">
          <input type="email" data-mini="true" data-clear-btn="false" readonly="readonly" placeholder="Email address" name="email[]" value="mattia.verdi@hotmail.com">
          <input type="email" data-mini="true" data-clear-btn="false" readonly="readonly" placeholder="Email address" name="email[]" value="luca.neri@gmail.com">
        </form>
        
<!--         <a id="add" href="#" data-icon="plus" data-theme="b"  data-role="button" data-inline="true">Add</a> -->
<!--         <a id="invita-amici-gruppo" href="#" data-role="button" data-inline="true">Invita</a> -->
        
        
        <!--  STATICO -->
        <a id="#" href="#" data-icon="plus" data-theme="b"  data-role="button" data-inline="true">Add</a>
        <a id="invita-amici-gruppo" href="#" data-role="button" data-inline="true">Invita</a>
        
		<div style="margin-top:30px">		
		  <label>Budget totale: </label>
		  <label id="budget_group_tot"> </label>
		</div>
		
<!-- 		<hr> -->
<!-- 		<p> Invita i tuoi amici su Facebook</p> -->
		        
    </div><!-- /content -->
    
    <div style="text-align: center"  data-role="footer" data-theme="c" >
      <ul style="list-style: none; padding: 0">
        <li>
         <a data-inline="true" href="" 
             style ="text-decoration: none; font-size: 13px; color: #999999 ">Giftshake © 2013</a>       
         
         <a data-inline="true" href="" 
             style ="text-decoration: none; padding-left: 20px; font-size: 13px; color: #999999" >Guida
         </a>
        </li>
     </ul>
   </div>

</div><!-- /page -->

		